<template>
	<view class="mine" v-for="(item, index) in data.userData" :key="item.user_id">
		<view class="mine_header">
			<view class="mine_header_img">
				<image :src="item.avatar" mode=""></image>
			</view>
			<view class="ming_header_name">{{ item.userName }}</view>
		</view>
		<view class="mine_content">
			<view class="mine_content_header">
				<view class="mine_about_me">
					<view class="mine_about_me_price">2</view>
					<view class="mine_about_me_font">我的收藏</view>
				</view>
				<view class="mine_about_me">
					<view class="mine_about_me_price">2</view>
					<view class="mine_about_me_font">我的消息</view>
				</view>
				<view class="mine_about_me">
					<view class="mine_about_me_price">2</view>
					<view class="mine_about_me_font">我的足迹</view>
				</view>
			</view>
			<view class="mine_content_middle">
				<view class="mine_content_h">
					<view class="mine_content_h_left">我的订单</view>
					<view class="mine_content_h_right">
						<navigator url="/pages/myOrder/myOrder">全部</navigator>
						<up-icon name="arrow-right"></up-icon>
					</view>
				</view>
				<view class="mine_content_b">
					<view class="mine_content_b_options" @click="skip((current = 0), (swiperCurrent = 0))">
						<up-icon name="bag-fill" color="#fb8648" size="28"></up-icon>
						待支付
					</view>
					<view class="mine_content_b_options" @click="skip((current = 1), (swiperCurrent = 1))">
						<up-icon name="coupon-fill" color="#fb8648" size="28"></up-icon>
						待发货
					</view>
					<view class="mine_content_b_options" @click="skip((current = 2), (swiperCurrent = 2))">
						<up-icon name="car-fill" color="#fb8648" size="28"></up-icon>
						待收货
					</view>
					<view class="mine_content_b_options" @click="skip((current = 3), (swiperCurrent = 3))">
						<up-icon name="checkmark-circle-fill" color="#fb8648" size="28"></up-icon>
						已完成
					</view>
				</view>
			</view>
		</view>
		<view class="mine_bottom">
			<view class="mine_bottom_all">
				<navigator url="/pages/address/address">
					<view class="mine_bottom_option">
						<view class="mine_bottom_one">
							<up-icon name="map" color="#fb8648" size="20"></up-icon>
							我的地址
						</view>
						<view class="mine_bottom_two"><up-icon name="arrow-right"></up-icon></view>
					</view>
				</navigator>

				<view class="mine_bottom_option">
					<view class="mine_bottom_one">
						<up-icon name="kefu-ermai" color="#fb8648" size="20"></up-icon>
						联系客服
					</view>
					<view class="mine_bottom_two"><up-icon name="arrow-right"></up-icon></view>
				</view>
				<view class="mine_bottom_option">
					<view class="mine_bottom_one">
						<up-icon name="setting" color="#fb8648" size="20"></up-icon>
						设置
					</view>
					<view class="mine_bottom_two"><up-icon name="arrow-right"></up-icon></view>
				</view>
				<navigator url="/pages/login/login" @click="clear">
					<view class="mine_bottom_option">
						<view class="mine_bottom_one">
							<up-icon name="close-circle" color="#fb8648" size="20"></up-icon>
							退出登录
						</view>
						<view class="mine_bottom_two"><up-icon name="arrow-right"></up-icon></view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, watchEffect, watch, onMounted } from 'vue';
import { GetUserFromId } from '../../apis/api.js';
import {onShow} from '@dcloudio/uni-app'
const data = reactive({
	user_id: '',
	userData: {}
});

// 通过id获取用户信息
onShow(() => {
	uni.getStorage({
		key: 'userId',
		success: (res) => {
			data.user_id = res.data;
			console.log('获取的userId为：', data.user_id);
			GetUserFromId({
				user_id: data.user_id
			}).then((res) => {
				data.userData = res.data;				
				console.log(data.userData);
			});
		},
		fail: (error) => {
			console.error('获取userId失败：', error);
		}
	});
});

// 退出登录，清除数据
const clear = () => {
	uni.removeStorage({
		key: 'userId',
		success: (res) => {
			console.log('清除userId成功');
		},
		fail: (error) => {
			console.error('清除userId失败', error);
		}
	});
};

// 在 watch 中监听本地存储中的用户数据变化
watchEffect(() => {});

// 跳转订单
const skip = (current, swiperCurrent) => {
	uni.navigateTo({
		url: '/pages/myOrder/myOrder?current=' + current + '&swiperCurrent=' + swiperCurrent
	});
};
</script>

<style lang="less" scoped>
.mine {
	width: 100%;
	height: 100vh;
	background-color: #f5f9fa;
	overflow: auto;
	.mine_header {
		width: 100%;
		height: 450rpx;
		background-color: #fb8648;
		border-radius: 0 0 15% 15%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.mine_header_img {
			width: 100px;
			height: 100px;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.ming_header_name {
			width: 100%;
			height: 20px;
			text-align: center;
			color: #ffffff;
			margin-top: 10px;
		}
	}
	.mine_content {
		height: 500rpx;
		box-sizing: border-box;
		padding: 0 20rpx 0 20rpx;
		margin-top: -100rpx;

		.mine_content_header {
			height: 200rpx;
			background-color: #ffffff;
			border-radius: 30rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			.mine_about_me_price {
				color: #fb8648;
				font-size: 40rpx;
				padding-bottom: 5rpx;
			}
			.mine_about_me_font {
				font-size: 35rpx;
				color: #707172;
			}
		}

		.mine_content_middle {
			height: 250rpx;
			margin: 15rpx 0 15rpx 0;
			border-radius: 30rpx;
			background-color: #ffffff;
			.mine_content_h {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.mine_content_h_left {
					font-size: 40rpx;
				}
				.mine_content_h_right {
					display: flex;
					color: #707172;
				}
			}
			.mine_content_b {
				display: flex;
				justify-content: space-around;
				.mine_content_b_options {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-top: 15rpx;
				}
			}
		}
	}
	.mine_bottom {
		height: 400rpx;
		margin-top: 10rpx;
		padding: 0 15rpx 0 15rpx;

		.mine_bottom_all {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			border-radius: 5%;
			background-color: #ffffff;
			.mine_bottom_option {
				display: flex;
				justify-content: space-between;
				.mine_bottom_one {
					display: flex;
					font-size: 40rpx;
					color: #414243;
				}
			}
		}
	}
}
</style>
